<template>
    <div class="setmall_customer">
        <!-- tab -->
        <el-tabs v-model="tabActiveName">
            <el-tab-pane v-for="{ label, name } in tabList" :key="name" :label="label" :name="name"></el-tab-pane>
        </el-tabs>
        <component :is="componentId"></component>
    </div>
</template>
<script setup>
import { computed, reactive, ref, unref, defineAsyncComponent } from 'vue';

const tabList = reactive([
    { name: 'buyers', label: '买家通知设置' },
    { name: 'template', label: '订阅消息模板管理' }
]);
let tabActiveName = ref('buyers');

const componentId = computed(() => {
    // todo:看其他环境是否可行，不行的话采用另一种导入方案
    const defineAsyncComponents = {
        buyers: defineAsyncComponent(() => import('./buyers/index.vue')),
        template: defineAsyncComponent(() => import('./template/index.vue'))
    };
    return defineAsyncComponents[tabActiveName.value];
});
</script>
